<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>放大镜</title>
  <style>
    .middleBox {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      position: relative;
    }

    .middleBox img {
      width: 400px;
      height: 400px;
    }

    .shade {
      width: 100px;
      height: 100px;
      background: yellow;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.5;
      display: none;
    }

    .smallBox {
      margin-top: 10px;

    }

    .smallBox img {
      border: 1px solid #000;
      margin-left: 5px;
      width: 50px;
      height: 50px;
    }

    .smallBox img.active {
      border-color: red;
    }

    .box {
      margin: 50px;
      width: 402px;
      position: relative;
    }

    .bigBox {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      position: absolute;
      top: 0;
      left: 105%;
      display: none;
      background-image: url(./images/big1.jpg);
      background-position: 0 0;
      background-size: 1600px 1600px;
      background-repeat: no-repeat;
    }

    .shade:hover {
      cursor: move;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="middleBox">
      <img src="./images/big1.jpg" width="400" height="400">
      <div class="shade"></div>
    </div>
    <div class="smallBox">
      <img class="active" src="./images/big1.jpg">
      <img src="./images/big2.jpg" alt="">
    </div>
    <div class="bigBox"></div>
  </div>
  <script>
    let box = document.querySelector('.box')
    let smallBox = document.querySelector('.smallBox');
    let middleImg = document.querySelector('.middleBox>img')
    let middleBox = document.querySelector('.middleBox')
    let bigBox = document.querySelector('.bigBox')
    let shadow = document.querySelector('.shade')

    // 下面小图点击事件
    smallBox.addEventListener('click', function (e) {
      // 事件绑定需要判断一下点击的位置，不然点击所有的子元素都会触发
      if (e.target.nodeName == 'IMG') {
        this.querySelector('.active').className = '';
        e.target.className = 'active';
        middleImg.src = e.target.src;
        bigBox.style.backgroundImage = `url(${e.target.src})`;
      }
    })

    // 绑定鼠标划入事件。
    // 放大镜闪烁的问题：
    // 将事件绑定在图片上，遮罩层显示之后就会遮挡鼠标所在的图片就会失去绑定事件
    middleBox.onmouseover = function () {
      //e.pageX
      shadow.style.display = 'block';
      bigBox.style.display = 'block';
      // 获取shadow的宽高
      shadowWidth = parseInt(window.getComputedStyle(shadow).width);
      shadowHeight = parseInt(window.getComputedStyle(shadow).height);
      // 获取中盒子宽高
      middleWidth = parseInt(window.getComputedStyle(middleBox).width)
      middleHeight = parseInt(window.getComputedStyle(middleBox).height)

      middleBox.onmousemove = function (e) {
        x = e.pageX;
        y = e.pageY;
        // 判断位置
        // 边界位置
        let borderX = middleWidth - shadowWidth;
        let borderY = middleHeight - shadowHeight;

        // 计算shadow的位置
        let shadowX = x - box.offsetLeft - shadowWidth / 2 + 'px';
        let shadowY = y - box.offsetTop - shadowHeight / 2 + 'px';
        shadow.style.top = shadowY;
        shadow.style.left = shadowX;

        //console.log(shadow.offsetLeft)
        if (shadow.offsetLeft < 0) {
          shadow.style.left = 0 + 'px'
        } else if (shadow.offsetLeft > borderX) {
          shadow.style.left = borderX + 'px'
        }
        if (shadow.offsetTop < 0) {
          shadow.style.top = 0 + 'px'
        } else if (shadow.offsetTop > borderY) {
          shadow.style.top = borderY + 'px'
        };

        let size = window.getComputedStyle(bigBox).backgroundSize.split(' ');
        console.log(size)
        // 计算大图的位置
        let bigImgPositionX = shadow.offsetLeft/(middleWidth+1)*parseInt(size[0])+'px';
        let bigImgPositionY= shadow.offsetTop/middleHeight*parseInt(size[1])+'px';
        bigBox.style.backgroundPosition=`-${bigImgPositionX} -${bigImgPositionY}`
        console.log(bigImgPositionX,bigImgPositionY)
      }
    }
    middleBox.onmouseout = function () {
      shadow.style.display = 'none';
      bigBox.style.display = 'none';
      middleImg.onmousemove = null
    }
  </script>

</body>

</html>